<template>
  <div>
    <BaseForm
      ref="searchForm"
      type="search"
      :items="formSearchItems"
      v-model:form="searchParams"
      @search="handleSearch"
    >
      <template #suffix-button>
        <el-button type="primary" @click="handleEdit({})">
          <el-icon>
            <Plus />
          </el-icon>
          添加
        </el-button>
      </template>
    </BaseForm>
    <BaseTable
      ref="baseTable"
      :searchParams="searchParams"
      :defaultHeight="284"
      :serial="true"
      :getTableDataFn="basicConfigService.pageListManagerResDto"
    >
      <el-table-column prop="managerName" label="姓名" />
      <el-table-column prop="wxId" label="微信ID" />
      <el-table-column prop="powerName" label="供电单位" />
      <el-table-column prop="wxGroupDtoList" label="管理微信群（请到微信群管理设置关联）" minWidth="160">
        <template #default="scope">
          <Tooltip :text="scope.row.wxGroupDtoList?.map((e) => e.wxGroupName)?.join('、')"></Tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />

      <el-table-column prop="updateTime" label="最后修改时间">
        <template #header>
          <span>最后修改时间</span>
          <SortTable :sortTablekey="sortTablekey" @click="sortTablekey = 1" :handleSearch="handleSearch"> </SortTable>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="100">
        <template #default="scope">
          <el-link :underline="false" link type="primary" size="small" @click.prevent="handleEdit(scope.row)"
            >编辑
          </el-link>
          <el-link :underline="false" link type="danger" size="small" @click.prevent="handleDel(scope.row)"
            >删除
          </el-link>
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
      v-if="dialogVisible"
      :title="(!ruleForm.managerId ? '新增' : '编辑') + '管理员'"
      :handleCancel="handleCancel"
      :dialogVisible="dialogVisible"
      width="800px"
    >
      <BaseForm
        v-if="dialogVisible"
        type="rule"
        :handleOk="handleOk"
        :handleCancel="handleCancel"
        :items="formItems"
        v-model:form="ruleForm"
        :rules="rules"
        label-width="120px"
        :refresh="handleSearch"
      >
      </BaseForm>
    </BaseDialog>
  </div>
</template>

<script setup lang="ts">
import { powerService } from '@/api/power';
import { basicConfigService } from '@/api/basicConfig';
import openMsgBox from '@/hooks/messageBox.js';

const options = ref([]);
const formSearchItems = ref([
  {
    name: '姓名',
    key: 'managerName',
    type: 'input',
  },
  {
    name: '微信ID',
    key: 'wxId',
    type: 'input',
  },
  {
    name: '供电单位',
    key: 'powerId',
    type: 'select-page',
    clearable: true,
    funName: "getByAreaQueryByPower",
    option: {
      name: "powerName",
      value: "powerId",
    }
  },
]);
const formItems = ref([
  {
    name: '姓名',
    key: 'managerName',
    type: 'input',
    placeholder: '请输入姓名',
  },
  {
    name: '供电单位',
    key: 'powerId',
    type: 'select-page',
    clearable: true,
    funName: "getByAreaQueryByPower",
    option: {
      name: "powerName",
      value: "powerId",
    }
  },
  {
    name: '微信ID',
    key: 'wxId',
    type: 'input',
    placeholder: '请输入微信id（请到微信群管理的群成员列表中查找对应的微信id）',
  },
  {
    name: '备注',
    key: 'remark',
    type: 'textarea',
    placeholder: '请输入内容',
  },
]);

const searchParams = ref({
  managerName: '',
  wxId: '',
  managerType: 3,
});
const areaList = ref([]);

onMounted(() => {});

const powerList = ref([]);

const lineList = ref([]);

const visibleUpload = ref(false);
const handleUpload = () => {
  visibleUpload.value = true;
};

const baseTable = ref(null);
const sortTablekey = ref(1);
const handleSearch = (data = { sort: undefined }, e = '') => {
  if (e != 'sort') sortTablekey.value = 0;
  baseTable.value.handleSearch({
    ...searchParams.value,
    updateTimeOrder: data?.sort,
  });
};
const ruleForm = ref({
  managerId: null,
  managerName: '',
  wxId: '',
  remark: '',
});
const rules = reactive({
  managerName: [{ required: true, message: '请输入姓名', trigger: 'change' }],
  wxId: [
    { required: true, message: '请输入微信id（请到微信群管理的群成员列表中查找对应的微信id）', trigger: 'change' },
  ],
});
const dialogVisible = ref(false);

const handleEdit = (row) => {
  ruleForm.value = { ...row };

  dialogVisible.value = true;
};
const handleCancel = () => {
  dialogVisible.value = false;
};

const handleDel = (row) => {
  openMsgBox(
    {},
    () => {
      return basicConfigService.manageBatchDel({ data: [row.managerId] });
    },
    () => {
      handleSearch();
    },
  );
};
const handleOk = () => {
  if (ruleForm.value.managerId) {
    const params = JSON.parse(JSON.stringify(ruleForm.value));
    return basicConfigService.updateAdmin({
      data: params,
    });
  } else {
    const params = [JSON.parse(JSON.stringify(ruleForm.value))];
    return basicConfigService.addAdmin({
      data: params,
    });
  }
};
</script>

<style lang="scss" scoped></style>
